<template>
  <div style="position: relative">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
    >
      <a-form-item  ref="roleIds" label="角色名称" name="roleIds">
        <a-select
            allowClear
            style="width: 100%"
            v-model:value="formState.roleIds"
            placeholder="请选择医废类型"
          >
            <a-select-option
              v-for="item in roleList"
              :key="item.id"
              :value="item.id"
              :disabled="item.disabled"
              >{{ item.name }}</a-select-option
            >
          </a-select>
      </a-form-item>

    </a-form>

   
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as sysUserAdminApi from "@/api/userAdmin.js";
import { message } from "ant-design-vue";


const rules = {
  roleIds: [
    {
      required: true,
       message: "请输入管理员名称",
      trigger: "blur",
    },
  ],
 

};
import * as settingApi from "@/api/setting1";
export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      roleIds: "", //管理员名称
      userId:''
    });

    const list = reactive({roleList:[]})
    
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
          settingApi
            .roleConcatUser(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    //获取用户关联角色
    const handleUserRelevanceRole = ()=>{
      settingApi.getListByUserId(formState.userId).then((res) => {
        if (res && res.success) {
          if (res.data) {
            if (res.data && res.data.length != 0) {
              formState.roleIds = res.data[0].id;
            }
          }
        }
      });
    }
    const getRole = ()=>{
      
       let params = {
        isPage: false,
      };
      settingApi.roleList(params).then((res) => {
        if (res && res.success) {
          if (res.data) {
            list.roleList = res.data.map((item) => {
              item.disabled = item.isFreeze == 1 ? true : false;
              return item;
            });
            handleUserRelevanceRole()
          }

        }
      });
    }
    onMounted(async () => {
      formState.userId = props.handleRow.sysUserId
      getRole()
    });

   
    return {
      formRef,
      handleType,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      ...toRefs(list),
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">

</style>